<script setup>
import { getGoodsDetailAPI } from '@/api/goods';
import { addCartAPI } from "@/api/cart";
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import Clause from './components/Clause'
import Helps from './components/Helps'
import Shipment from './components/Shipment'
import Sku from './components/Sku'

// 封装获取详情的函数和放置详情的对象
const goods = ref({})
const getDetail = async (id) => {
  const { result } = await getGoodsDetailAPI(id)
  console.log(result);
  goods.value = result

  // 获取完获取详情后, 需要转换一下sku, 方便后续插件使用
  goodsToSku()
}
// 页面进来时根据所带的 id 获取数据
onLoad((options) => {
  getDetail(options.id)
})

// 处理轮播图指示器数据
const currentIndex = ref(0)
const onChange = (ev) => {
  console.log(ev.detail);
  // 每次轮播图改变, 都储存当前的索引
  currentIndex.value = ev.detail.current
}

// 弹窗
// 组件获取
const popup = ref()
// 记录当前要弹起的组件
const popupType = ref('')
const showPopup = (type) => {
  // 记录要显示的那个组件名
  popupType.value = type
  popup.value.open()
}

// 决定 sku 弹窗是否显示
const isShowSku = ref(false)
// 存放商品sku的对象
const gooksSku = ref({})
// 显示类型, 氛围加入购物车, 和立即购买, 决定了弹起时按钮
const skuMode = ref(1)
// 转换函数, 将商品详情数据按照插件需求来进行转换
const goodsToSku = () => {
  gooksSku.value = {
    // 商品id
    _id: goods.value.id,
    // 商品名称
    name: goods.value.name,
    // 商品主图
    goods_thumb: goods.value.mainPictures[0],
    //   sku_list，有库存的商品，所以用户可以选择
    sku_list: goods.value.skus.map((v) => ({
      // 商品的skuId
      _id: v.id,
      // 商品的id
      goods_id: goods.value.id,
      // 商品名称
      goods_name: goods.value.name,
      // 商品主图
      image: goods.value.mainPictures[0],
      //   sku对应的价格
      price: v.price,
      //   sku对应的规格名称
      sku_name_arr: v.specs.map((vv) => vv.valueName),
      stock: v.inventory,
    })),
    //  spec_list 所有的规格 列表
    spec_list: goods.value.specs.map((v) => ({
      // list代表是规格的集合，数据结构为
      // "list": [{"name": "红色"},{"name": "黑色"},{"name": "白色"}]
      list: v.values.map((vv) => ({
        name: vv.name,
      })),
      //   name 代表显示的规格名称
      name: v.name,
    }))
  }




}
// 空值sku显示与否的函数
const showSku = (type) => {
  skuMode.value = type
  isShowSku.value = true
}
// 点击立即购买
const buyNow = (sku) => {
  console.log('立即购买', sku);
}
// 点击加入购物车
const addCart = async (sku) => {
  console.log('加入购物车', sku);
  await addCartAPI(sku._id, sku.buy_num)
  uni.showToast({
    title: '添加成功'
  })
  // 加入成功跳转购物车
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/cart/index'
    })
  }, 1000);
}

</script>

<template>
  <view class="goods">
    <!-- 返回按钮 -->
    <GoBackBtn />

    <scroll-view scroll-y class="viewport">
      <!-- 商品信息 -->
      <view class="goods anchor" data-anchor-index="0">
        <!-- 轮播图 -->
        <view class="preview">
          <swiper autoplay circular @change="onChange">
            <swiper-item v-for="(item, index) in goods.mainPictures" :key="index">
              <image :src="item" />
            </swiper-item>
          </swiper>
          <!-- 指示器 -->
          <view class="indicator">
            <text class="current">{{ currentIndex + 1 }}</text>
            <text class="split">/</text>
            <text class="total">{{ goods.mainPictures?.length }}</text>
          </view>
        </view>

        <!-- 名称和价格 -->
        <view class="meta">
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goods.price }}</text>
          </view>
          <view class="brand">
            <image mode="aspectFill" :src="goods.brand?.picture" />
          </view>
          <view class="name ellipsis">
            {{ goods.name }}
          </view>
          <view class="remarks"> {{ goods.desc }} </view>
        </view>

        <!-- 规格参数 -->
        <view class="related">
          <view @tap="showPopup('sku')" class="item arrow">
            <text class="label">选择</text>
            <text class="text ellipsis">
              {{ '白色 红外体温计 1件' || "请选择商品规格" }}
            </text>
          </view>
          <view @tap="showPopup('shipment')" class="item arrow">
            <text class="label">送至</text>
            <text class="text ellipsis">北京市顺义区京顺路9号黑马程序员</text>
          </view>
          <view @tap="showPopup('clause')" class="item arrow">
            <text class="label">服务</text>
            <text class="text ellipsis">无忧退 快速退款 免费包邮</text>
          </view>
        </view>
      </view>
      <!-- 商品评价 - 静态结构 - 没有接口不需要处理 -->
      <view class="comments panel anchor" data-anchor-index="1">
        <view class="title arrow">
          <text>评价</text>
          <navigator url="/pages/comments/index" hover-class="none" class="more">好评度 70%</navigator>
        </view>
        <view class="comment">
          <view class="caption">
            <view class="user">
              <image class="avatar" src="https://static.botue.com/erabbit/static/uploads/avatar_2.jpg" />
              <text>白月初</text>
            </view>
            <view class="rating">
              <view class="rank" style="width: 80%"></view>
            </view>
          </view>
          <view class="content">
            <view class="text"> 质量不错，灵敏度高，结构巧妙，款式也好看 </view>
            <view class="pictures">
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_1.jpg" />
              </view>
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_2.jpg" />
              </view>
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_2.jpg" />
              </view>
            </view>
            <view class="extra">
              <text class="date">购买时间: 2020-11-11</text>
              <text class="type">黑色 公开版 128G</text>
            </view>
          </view>
        </view>
        <view class="comment">
          <view class="caption">
            <view class="user">
              <image class="avatar" src="https://static.botue.com/erabbit/static/uploads/avatar_3.jpg" />
              <text>白月初</text>
            </view>
            <view class="rating">
              <view class="rank" style="width: 60%"></view>
            </view>
          </view>
          <view class="content">
            <view class="text"> 质量不错，灵敏度高，结构巧妙，款式也好看 </view>
            <view class="pictures">
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_1.jpg" />
              </view>
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_2.jpg" />
              </view>
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_2.jpg" />
              </view>
              <view class="picture">
                <image src="https://static.botue.com/erabbit/static/uploads/comment_1.jpg" />
              </view>
            </view>
            <view class="extra">
              <text class="date">购买时间: 2020-11-11</text>
              <text class="type">黑色 公开版 128G</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 商品详情 -->
      <view class="detail panel anchor" data-anchor-index="2">
        <view class="title">
          <text>详情</text>
        </view>
        <view class="content">
          <view class="properties">
            <!-- 商品详情属性 -->
            <view class="item" v-for="item in goods.details?.properties" :key="item.name">
              <text class="label">{{ item.name }}</text>
              <text class="value">{{ item.value }}</text>
            </view>
          </view>

          <!-- 商品详情图片 -->
          <image mode="widthFix" v-for="(item, index) in goods.details?.pictures" :key="index" :src="item" />
        </view>
      </view>

      <!-- 常见问题 -->
      <view @tap="showPopup('helps')" class="help arrow">
        <text class="icon-help"></text>
        <view hover-class="none">常见问题</view>
      </view>

      <!-- 推荐 -->
      <view class="recommend panel anchor" data-anchor-index="3">
        <view class="title">
          <text>推荐</text>
        </view>
        <view class="content">
          <navigator v-for="item in goods.similarProducts" :key="item.id" :url="`/pages/goods/index?id=${item.id}`"
            hover-class="none">
            <image class="image" mode="aspectFit" :src="item.picture"></image>
            <view class="name ellipsis">
              {{ item.name }}
            </view>
            <view class="price">
              <text class="symbol">¥</text>
              <text class="number">{{ item.price }}</text>
            </view>
          </navigator>
        </view>
      </view>
    </scroll-view>

    <!-- 用户操作 -->
    <view class="toolbar">
      <view class="icons">
        <button class="collect"><text class="icon-heart"></text>收藏</button>
        <button class="contact" open-type="contact">
          <text class="icon-handset"></text>客服
        </button>
        <button class="cart">
          <text class="icon-cart"></text>购物车
        </button>
      </view>
      <view class="buttons">
        <view data-button-type="cart" class="addcart" @tap="showSku(2)">
          加入购物车
        </view>
        <view data-button-type="payment" class="payment" @tap="showSku(3)">
          立即购买
        </view>
      </view>
    </view>

    <!-- 弹出层 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="popup-root">
        <text class="close icon-close"></text>
        <!-- 4个组件 -->
        <!-- 这四个组件放在同一个弹窗, 但是不可能同时出现 -->
        <!-- 只会根据你点击时记录的那个要显示的名字进行区分0 -->
        <Clause v-show="popupType === 'clause'" />
        <Helps v-show="popupType === 'helps'" />
        <Shipment v-show="popupType === 'shipment'" />
        <Sku v-show="popupType === 'sku'" />
      </view>
    </uni-popup>

    <!-- SKU -->
    <!-- 其实这个放在哪里不重要, 只会在点击购买按钮的时候出现 -->
    <vk-data-goods-sku-popup ref="skuPopup" v-model="isShowSku" border-radius="20" :localdata="gooksSku" :mode="skuMode"
      @buy-now="buyNow" @add-cart="addCart"></vk-data-goods-sku-popup>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 自定义导航栏 */
.navbar {
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  .search {
    height: 40px;
    padding: 1px 110px 0 50px;

    .input {
      height: 62rpx;
      border-radius: 60rpx;
      font-size: 26rpx;
      color: #8b8b8b;
      background-color: #f3f4f4;
      position: relative;

      &::before {
        position: absolute;
        left: 24rpx;
        top: 50%;
        color: #b7b7b7;
        font-size: 28rpx;
        transform: translateY(-50%);
      }
    }
  }

  .wrap {
    position: relative;
  }

  .back {
    position: absolute;
    left: 10px;
    top: 2px;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    font-size: 23px;
    color: #191919;
  }

  .tabs {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1rpx solid #eaeaea;

    text {
      display: block;
      padding: 10rpx 10rpx 16rpx;
      font-size: 28rpx;
      position: relative;
    }

    .active {
      color: #27ba9b;
      font-weight: 500;

      &::after {
        content: "";
        position: absolute;
        left: 18rpx;
        right: 20rpx;
        bottom: 14rpx;
        height: 4rpx;
        background-color: #27ba9b;
      }
    }
  }
}

.viewport {
  background-color: #f4f4f4;
  height: 100vh;
}

.panel {
  margin-top: 20rpx;
  background-color: #fff;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    line-height: 1;
    padding: 30rpx 60rpx 30rpx 6rpx;
    position: relative;

    text {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      border-left: 4rpx solid #27ba9b;
    }

    navigator {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.arrow {
  &::after {
    position: absolute;
    top: 50%;
    right: 30rpx;
    content: "\e6c2";
    color: #ccc;
    font-family: "erabbit" !important;
    font-size: 32rpx;
    transform: translateY(-50%);
  }
}

/* 商品信息 */
.goods {
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;

  .preview {
    height: 750rpx;
    position: relative;

    .indicator {
      height: 40rpx;
      padding: 0 24rpx;
      line-height: 40rpx;
      border-radius: 30rpx;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
    }
  }

  .indicator {
    .current {
      font-size: 26rpx;
    }

    .split {
      font-size: 24rpx;
      margin: 0 1rpx 0 2rpx;
    }

    .total {
      font-size: 24rpx;
    }
  }

  .meta {
    position: relative;
    border-bottom: 1rpx solid #eaeaea;

    .price {
      height: 130rpx;
      padding: 25rpx 30rpx 0;
      color: #fff;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #35c8a9;
    }

    .number {
      font-size: 56rpx;
    }

    .brand {
      width: 160rpx;
      height: 80rpx;
      overflow: hidden;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
    }

    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }

    .remarks {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }
  }

  .related {
    padding-left: 20rpx;

    .item {
      height: 90rpx;
      padding-right: 60rpx;
      border-bottom: 1rpx solid #eaeaea;
      font-size: 26rpx;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;

      &:last-child {
        border-bottom: 0 none;
      }
    }

    .label {
      width: 60rpx;
      color: #898b94;
      margin: 0 16rpx 0 10rpx;
    }

    .text {
      flex: 1;
      -webkit-line-clamp: 1;
    }
  }
}

/* 商品评论 */
.comments {
  padding-left: 20rpx;

  .comment {
    padding: 24rpx 40rpx 24rpx 10rpx;
    border-top: 1rpx solid #eaeaea;
  }

  .caption {
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .avatar {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
      border-radius: 50%;
    }
  }

  .user {
    font-size: 26rpx;
    color: #333;
    display: flex;
    align-items: center;
  }

  .rating {
    width: 144rpx;
    height: 24rpx;
    background-image: url(https://static.botue.com/erabbit/static/images/rating_off.png);
    background-size: contain;

    .rank {
      height: 100%;
      background-image: url(https://static.botue.com/erabbit/static/images/rating_on.png);
      background-size: 144rpx 24rpx;
    }
  }

  .content {
    .text {
      line-height: 1.4;
      margin-top: 24rpx;
      font-size: 24rpx;
      color: #333;
    }

    .extra {
      display: flex;
      justify-content: space-between;
      margin: 20rpx 1rpx 0 0;
      font-size: 22rpx;
      color: #666;
    }
  }

  .pictures {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx 0 0 1rpx;
  }

  .picture {
    width: 150rpx;
    height: 150rpx;
    margin-right: 27rpx;

    &:last-child {
      margin-right: 0;
    }
  }
}

/* 类似商品 */
.similar {
  margin-top: 20rpx;

  .bar {
    display: flex;
    align-items: center;
    height: 90rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #fff;

    text {
      flex: 1;
      text-align: center;
      position: relative;
    }

    .active {
      &::after {
        content: "";
        display: block;
        width: 60rpx;
        height: 4rpx;
        background-color: #27ba9b;
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        bottom: -5rpx;
      }
    }
  }

  .content {
    padding-top: 20rpx;
    background-color: #f4f4f4;
    white-space: nowrap;

    navigator {
      display: inline-block;
      width: 200rpx;
      height: 270rpx;
      padding: 15rpx 15rpx 0;
      margin-right: 15rpx;
      background-color: #fff;
      border-radius: 6rpx;

      &:first-child {
        margin-left: 15rpx;
      }
    }

    image {
      height: 172rpx;
    }

    .name {
      max-height: 64rpx;
      line-height: 1.2;
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #333;
      -webkit-line-clamp: 1;
    }

    .price {
      font-size: 18rpx;
      color: #cf4444;
    }

    .number {
      font-size: 24rpx;
      margin-left: 2rpx;
    }
  }
}

/* 商品详情 */
.detail {
  padding-left: 20rpx;

  .content {
    margin-left: -20rpx;
  }

  .properties {
    padding: 0 20rpx;
    margin-bottom: 30rpx;

    .item {
      display: flex;
      line-height: 2;
      padding: 10rpx;
      font-size: 26rpx;
      color: #333;
      border-bottom: 1rpx dashed #ccc;
    }

    .label {
      width: 200rpx;
    }

    .value {
      flex: 1;
    }
  }
}

/* 常见问题 */
.help {
  display: flex;
  align-items: center;
  padding: 20rpx 0 20rpx 20rpx;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  position: relative;

  .icon-help {
    font-size: 34rpx;
    margin-right: 6rpx;
    color: #ffa868;
  }
}

/* 商品推荐 */
.recommend {
  padding-left: 20rpx;

  .content {
    padding: 0 20rpx 20rpx;
    margin-left: -20rpx;
    background-color: #f4f4f4;
    overflow: hidden;

    navigator {
      width: 345rpx;
      padding: 24rpx 20rpx 20rpx;
      margin: 20rpx 20rpx 0 0;
      border-radius: 10rpx;
      background-color: #fff;
      float: left;
    }

    .image {
      height: 260rpx;
    }

    .name {
      height: 80rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
    }

    .price {
      line-height: 1;
      font-size: 20rpx;
      color: #cf4444;
    }

    .number {
      font-size: 26rpx;
      margin-left: 2rpx;
    }
  }

  navigator {
    &:nth-child(even) {
      margin-right: 0;
    }
  }
}

/* 底部工具栏 */
.toolbar {
  height: 120rpx;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .buttons {
    display: flex;

    &>view {
      width: 220rpx;
      text-align: center;
      line-height: 72rpx;
      font-size: 26rpx;
      color: #fff;
      border-radius: 72rpx;
    }

    .addcart {
      background-color: #ffa868;
    }

    .payment {
      background-color: #27ba9b;
      margin-left: 20rpx;
    }
  }

  .icons {
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;

    button {
      text-align: center;
      line-height: 1.4;
      padding: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;
    }

    text {
      display: block;
      font-size: 34rpx;
    }
  }
}
</style>